var store = Ext.create('Ext.data.TreeStore', {
    root: {
        expanded: true,
        children: [
            { text: "Location", expanded: true, children: [
                { text: "S001", leaf: true },
                { text: "S002", leaf: true},
                { text: "S003", leaf: true},
                { text: "S004", leaf: true},
                { text: "S005", leaf: true},
                { text: "S006", leaf: true},
                { text: "S007", leaf: true},
                { text: "S008", leaf: true}
            ] },
        ]
    }
});

var menu = new Ext.menu.Menu({  
        items : [{  
            text : '清除'  
        }, {  
            text : '弹出菜单2'  
        }, {  
            text : '弹出菜单3'  
        }, {  
            text : '弹出菜单4'  
        }]  
    });  
Ext.onReady(function(){

    

	Ext.create('Ext.panel.Panel', {
		width: '100%',
		height:'100%',
		title: 'Border Layout',
		layout: 'border',
		items: [{

			title: 'South Region is resizable',
			region: 'south',     
			xtype: 'panel',
			height: 100,
			split: true,        
			margins: '0 5 5 5'
		},{
			//left
			id:'dragPanel',
			title: 'West Region is collapsible',
			region:'west',
			xtype: 'panel',
			margins: '5 0 0 5',
			width: 200,
			//collapsible: true,   
			id: 'west-region-container',
			layout: 'fit',
			items:[{
				id:'dragTreepanel',
				xtype:'treepanel',
				store: store,
    			rootVisible: false,
    			listeners:{
    				itemmouseenter : function( view, record, item, index, e){
    					var tree = Ext.getCmp('dragTreepanel');
    					var text = record.get('text');
						var leaf = record.get('leaf');
						if (leaf) {
							if(!item.draggable){
								var targetItem = new Ext.dd.DragSource(item, { group: 'carsDDGroup' });
								item.draggable=true;
								targetItem.afterDragDrop = function(target, e, id) {
						            var destEl = Ext.get(id);
						            //var srcEl = Ext.get(this.getEl());
						            //var sColor = srcEl.dom.id.split('_')[1]; //得取拖动源id的后面一部分，即proxy_red后面的red
						            destEl.dom.innerHTML = text; //设置目标id的背景色
						        };
							}
						};
    				}
    			}

			}]
		},{
			id:'dropPanel',
			title: 'Center Region',
			region: 'center',    
			xtype: 'panel',
			layout: 'fit',
			margins: '5 5 0 0',
			tbar:[{
				xtype:'button',
				text:'',
				iconCls:'add',
				width:25,
				autoScroll :true,
				handler : function() {  
					var dropPanel = Ext.getCmp('dropPanel');
					//alert(dropPanel.body.dom.childNodes.length);

					var el =[{
						id:Ext.id(),
						tag :'div',

					}]
					var elArray = [{
						id :  Ext.id(),
						tag : 'div',  
						html :  '',  
						style : 'border: 1px dashed #FD0C0C;width:100px; height:30px; margin:10 0 0 0 ; left:100px; position:absolute;'  
					},{
						id :  Ext.id(),  
						tag : 'div',  
						html :  '',  
						style : 'border: 1px dashed #0DA553;width:100px; height:30px; margin:10 0 0 0; left:250px; position:absolute;'
					},{
						id :  Ext.id(),  
						tag : 'div',  
						html :  '',  
						style : 'border: 1px dashed #2726EB;width:100px; height:30px; margin:10 0 0 0; left:400px; position:absolute;'
					},{
						id :  Ext.id(),  
						tag : 'div',  
						html :  '',  
						style : 'border: 1px dashed #2726EB;width:100px; height:30px; margin:10 0 0 0; left:520px; position:absolute;'
					},{
						id :  Ext.id(),  
						tag : 'div',  
						html :  '',  
						style : 'border: 1px dashed #2726EB;width:100px; height:30px; margin:10 0 0 0; left:640px; position:absolute;'
					},{
						id :  Ext.id(),  
						tag : 'div',  
						html :  '',  
						style : 'border: 1px dashed #2726EB;width:100px; height:30px; margin:10 0 0 0; left:760px; position:relative;'
					},];
					Ext.DomHelper.append(dropPanel.body, elArray);  
					for (var i = 0; i < elArray.length; i++) {
						if ( elArray[i].html=='') {
							//alert("Target Location can not be null!");
						};
						Ext.create('Ext.dd.DDTarget', elArray[i].id ,'carsDDGroup'); 
						Ext.get(elArray[i].id).on('contextmenu', function(e) {  
							e.stopEvent(); 
							menu.showAt(e.getXY());  
							menu.on("click",function(menu, item, e, eOpts ){
								if (item.text =="清除") {
									elArray[i].innerHTML='';
								};
							});
						});  
					};
				} 
			},'-',{
				xtype:'button',
				text:'',
				iconCls:'delete',
				width:25
			}]
		}],
		renderTo: Ext.getBody()
	});
	//new Ext.dd.DragSource('dragTreepanel', { group: 'carsDDGroup' });
	

	//alert(carElements.getChildByElement());
	/*Ext.each(carElements.elements, function(el) {  
        var dd = Ext.create('Ext.dd.DD', el, 'carsDDGroup', {  
            isTarget  : false  
        });  
        Ext.apply(dd, overrides);  
    }); */
	//var truckElements = Ext.getCmp('dropPanel').select('div');  
	//var carsDDTarget = Ext.create('Ext.dd.DDTarget', 'dropPanel','carsDDGroup');  
});